<!DOCTYPE HTML>
<html lang="zh-CN">

<head>
    <!--Setting-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="apple-mobile-web-app-capable" content="涛哥的博客">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no,adress=no">
    <meta name="browsermode" content="application">
    <meta name="screen-orientation" content="portrait">
    <meta name="theme-version" content="1.2.3">
    <meta name="root" content="/">
    <link rel="dns-prefetch" href="https://jaredtao.github.io">
    <!--SEO-->

<meta name="keywords" content="Qt,Qml,QtQuick,组件化编程" />


<meta name="description" content="
简介
源码
自绘方案
QPainter
QWidget+QPainter 示例
QQuickPaintedItem+QPainter 示例
关于QPainter


Qml Canvas
Qm..." />


<meta name="robots" content="all" />
<meta name="google" content="all" />
<meta name="googlebot" content="all" />
<meta name="verify" content="all" />
    <!--Title-->

<title>
    
    玩转Qml(7)-自绘组件 |
    
    涛哥的博客
</title>

<link rel="alternate" href="/atom.xml" title="涛哥的博客" type="application/atom+xml">


<link rel="icon" href="/favicon.ico">

    


<link rel="stylesheet" href="/css/bootstrap.min.css?rev=3.3.7.css">
<link rel="stylesheet" href="/css/font-awesome.min.css?rev=4.7.0.css">
<link rel="stylesheet" href="/css/style.css?rev=@@hash.css">

    
<div class="hide">
    <script type="text/javascript">
    var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
    document.write(unescape("%3Cspan class='cnzz_stat_icon_1263868967 hide' %3E%3Cscript%20src%3D%22https%3A%2F%2Fs95.cnzz.com%2Fz_stat.php%3Fweb_id%3D1272564536%22%3E%3C%2Fscript%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3D1263868967%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));
    </script>
</div>




    

<script>
(function() {
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    } else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>

<meta name="generator" content="Hexo 4.2.1"></head>
<!--[if lte IE 8]>
<style>
    html{ font-size: 1em }
</style>
<![endif]-->
<!--[if lte IE 9]>
<div style="ie">你使用的浏览器版本过低，为了你更好的阅读体验，请更新浏览器的版本或者使用其他现代浏览器，比如Chrome、Firefox、Safari等。</div>
<![endif]-->
<body>
    <header class="main-header"  style="background-image:url(
    http://snippet.shenliyang.com/img/banner.jpg)"
     >
    <div class="main-header-box">
        <a class="header-avatar" href="/" title='JaredTao'>
            <img src="/img/avatar.jpg" alt="logo头像" class="img-responsive center-block">
        </a>
        <div class="branding">
            <!--<h2 class="text-hide">Snippet主题,从未如此简单有趣</h2>-->
            
            <h2>
                单枪匹马亦对饮，历经磨难记初心
            </h2>
            
        </div>
    </div>
</header>
    <nav class="main-navigation">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="navbar-header"><span class="nav-toggle-button collapsed pull-right" data-toggle="collapse" data-target="#main-menu" id="mnav">
                        <span class="sr-only"></span>
                        <i class="fa fa-bars"></i>
                    </span>
                    <a class="navbar-brand" href="https://jaredtao.github.io">
                        涛哥的博客</a>
                </div>
                <div class="collapse navbar-collapse" id="main-menu">
                    <ul class="menu">
                        
                        <li role="presentation" class="text-center">
                            <a href="/"><i class="fa "></i>
                                首页</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/categories/玩转Qt/"><i class="fa "></i>
                                玩转Qt</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/categories/玩转Qml/"><i class="fa "></i>
                                玩转Qml</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/categories/玩转QtQuick/"><i class="fa "></i>
                                玩转QtQuick</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/categories/涛哥的博客/"><i class="fa "></i>
                                涛哥的博客</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/archives/"><i class="fa "></i>
                                时间轴</a>
                        </li>
                        
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>
    <section class="content-wrap">
        <div class="container">
            <div class="row">
                <main class="col-md-8 main-content m-post">
                    <p id="process"></p>
<article class="post">
    <div class="post-head">
        <h1 id="玩转Qml(7)-自绘组件">
            
            玩转Qml(7)-自绘组件
            
        </h1>
        <div class="post-meta">
    
    <span class="categories-meta fa-wrap">
        <i class="fa fa-folder-open-o"></i>
        <a class="category-link" href="/categories/%E7%8E%A9%E8%BD%ACQml/">玩转Qml</a>
    </span>
    
    
    <span class="fa-wrap">
        <i class="fa fa-tags"></i>
        <span class="tags-meta">
            
            <a class="tag-link" href="/tags/Qml/" rel="tag">Qml</a> <a class="tag-link" href="/tags/Qt/" rel="tag">Qt</a> <a class="tag-link" href="/tags/QtQuick/" rel="tag">QtQuick</a> <a class="tag-link" href="/tags/%E7%BB%84%E4%BB%B6%E5%8C%96%E7%BC%96%E7%A8%8B/" rel="tag">组件化编程</a>
            
        </span>
    </span>
    
    
    
    <span class="fa-wrap">
        <i class="fa fa-clock-o"></i>
        <span class="date-meta">
            2019/05/19</span>
    </span>
    
    <span class="fa-wrap">
        <i class="fa fa-eye"></i>
        <span id="busuanzi_value_page_pv"></span>
    </span>
    
    
</div>
        
        
        <p class="fa fa-exclamation-triangle warning">
            本文于<strong>
                2031</strong>
            天之前发表，文中内容可能已经过时。
        </p>
        
    </div>
    
<div id="post-gallery">
    
    <img src="/images/Qml7/4.gif" alt="gallery-img" class="gallery">
    
</div>

    <div class="post-body post-content">
        <ul>
<li><a href="#简介">简介</a></li>
<li><a href="#源码">源码</a></li>
<li><a href="#自绘方案">自绘方案</a></li>
<li><a href="#qpainter">QPainter</a><ul>
<li><a href="#qwidgetqpainter-示例">QWidget+QPainter 示例</a></li>
<li><a href="#qquickpainteditemqpainter-示例">QQuickPaintedItem+QPainter 示例</a></li>
<li><a href="#关于qpainter">关于QPainter</a></li>
</ul>
</li>
<li><a href="#qml-canvas">Qml Canvas</a></li>
<li><a href="#qml-shapes">Qml Shapes</a></li>
<li><a href="#qopenglwidget--qopenglwindow">QOpenGLWidget / QOpenGLWindow</a></li>
<li><a href="#qml-scenegraph">Qml SceneGraph</a></li>
<li><a href="#qml-qquickframebufferobject">Qml QQuickFrameBufferObject</a></li>
<li><a href="#qml-shadereffect">Qml ShaderEffect</a></li>
<li><a href="#qvulkanwindow">QVulkanWindow</a></li>
</ul>
<h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><p>本文是《玩转Qml》系列文章的第七篇，涛哥会罗列Qt中的所有自绘方案，并提供一些案例和说明。</p>
<p>Qt自带的组件，外观都是固定的，一般可以通过qss/Qml style等方式进行定制。</p>
<p>如果要实现外观特殊的组件，就需要自己绘制了。</p>
<h2 id="源码"><a href="#源码" class="headerlink" title="源码"></a>源码</h2><p>《玩转Qml》系列文章，配套了一个优秀的开源项目:TaoQuick</p>
<p>github <a href="https://github.com/jaredtao/TaoQuick" target="_blank" rel="noopener">https://github.com/jaredtao/TaoQuick</a></p>
<p>访问不了或者速度太慢，可以用国内的镜像网站gitee</p>
<p><a href="https://gitee.com/jaredtao/TaoQuick" target="_blank" rel="noopener">https://gitee.com/jaredtao/TaoQuick</a></p>
<h2 id="自绘方案"><a href="#自绘方案" class="headerlink" title="自绘方案"></a>自绘方案</h2><p>Qt中的自绘方案有这么一些：</p>
<ul>
<li>QWidget+QPainter / QQuickPaintedItem+QPainter</li>
<li>Qml Canvas</li>
<li>Qml Shapes</li>
<li>QOpenGLWidget / QOpenGLWindow</li>
<li>Qml QQuickFrameBufferObject</li>
<li>Qml SceneGraph</li>
<li>Qml ShaderEffect</li>
<li>QVulkanWindow</li>
</ul>
<p>(GraphicsView和QWidget的绘制类似，就不讨论了)</p>
<h2 id="QPainter"><a href="#QPainter" class="headerlink" title="QPainter"></a>QPainter</h2><p>QPainter是一个功能强大的画笔，QWidget中的各种控件如QPushButton、QLable等都是用QPainter画出来的。</p>
<p>(QWidget的控件在绘制时，还增加了qss样式表，让UI定制变得更加方便。)</p>
<h3 id="QWidget-QPainter-示例"><a href="#QWidget-QPainter-示例" class="headerlink" title="QWidget+QPainter 示例"></a>QWidget+QPainter 示例</h3><p>QWidget中使用QPainter的方法，是重载paintEvent事件，这里示例绘制一个进度条:</p>
<p><img src="/images/Qml7/1.gif" alt="预览"></p>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//MainWindow.h</span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">pragma</span> once</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">&lt;QMainWindow&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MainWindow</span> :</span> <span class="keyword">public</span> QMainWindow</span><br><span class="line">&#123;</span><br><span class="line">    Q_OBJECT</span><br><span class="line"></span><br><span class="line"><span class="keyword">public</span>:</span><br><span class="line">    MainWindow(QWidget *parent = <span class="number">0</span>);</span><br><span class="line">    ~MainWindow();</span><br><span class="line"><span class="keyword">protected</span>:</span><br><span class="line">    <span class="function"><span class="keyword">void</span> <span class="title">paintEvent</span><span class="params">(QPaintEvent *event)</span> <span class="keyword">override</span></span>;</span><br><span class="line">    <span class="function"><span class="keyword">void</span> <span class="title">timerEvent</span><span class="params">(QTimerEvent *event)</span> <span class="keyword">override</span></span>;</span><br><span class="line"><span class="keyword">private</span>:</span><br><span class="line">    QList&lt;QColor&gt; mColorList;</span><br><span class="line">    <span class="keyword">int</span> mCurrent = <span class="number">0</span>;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//MainWindow.cpp</span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">"MainWindow.h"</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">&lt;QPainter&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">&lt;QtMath&gt;</span></span></span><br><span class="line">MainWindow::MainWindow(QWidget *parent)</span><br><span class="line">    : QMainWindow(parent)</span><br><span class="line">&#123;</span><br><span class="line">    resize(<span class="number">400</span>, <span class="number">300</span>);</span><br><span class="line">    mColorList &lt;&lt; QColor(<span class="number">51</span>, <span class="number">52</span>, <span class="number">54</span>)</span><br><span class="line">               &lt;&lt; QColor(<span class="number">75</span>, <span class="number">85</span>, <span class="number">86</span>)</span><br><span class="line">               &lt;&lt; QColor(<span class="number">87</span>, <span class="number">103</span>, <span class="number">103</span>)</span><br><span class="line">               &lt;&lt; QColor(<span class="number">95</span>, <span class="number">119</span>, <span class="number">121</span>)</span><br><span class="line">               &lt;&lt; QColor(<span class="number">101</span>, <span class="number">132</span>, <span class="number">134</span>)</span><br><span class="line">               &lt;&lt; QColor(<span class="number">104</span>, <span class="number">146</span>, <span class="number">145</span>)</span><br><span class="line">               &lt;&lt; QColor(<span class="number">104</span>, <span class="number">158</span>, <span class="number">158</span>)</span><br><span class="line">               &lt;&lt; QColor(<span class="number">101</span>, <span class="number">169</span>, <span class="number">168</span>)</span><br><span class="line">               &lt;&lt; QColor(<span class="number">92</span>, <span class="number">182</span>, <span class="number">180</span>)</span><br><span class="line">               &lt;&lt; QColor(<span class="number">79</span>, <span class="number">194</span>, <span class="number">191</span>);</span><br><span class="line"></span><br><span class="line">    <span class="comment">//每秒触发60次定时器，即刷新率60FPS</span></span><br><span class="line">    startTimer(<span class="number">1000</span> / <span class="number">60</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">MainWindow::~MainWindow()</span><br><span class="line">&#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">MainWindow::timerEvent</span><span class="params">(QTimerEvent *)</span> </span>&#123;</span><br><span class="line">    mCurrent =(mCurrent + <span class="number">3</span>) % <span class="number">360</span>;</span><br><span class="line">    update();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">MainWindow::paintEvent</span><span class="params">(QPaintEvent *event)</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">    <span class="function">QPainter <span class="title">painter</span><span class="params">(<span class="keyword">this</span>)</span></span>;</span><br><span class="line">    painter.setRenderHints(QPainter::Antialiasing|QPainter::TextAntialiasing);</span><br><span class="line">    <span class="comment">//原点x坐标</span></span><br><span class="line">    qreal a = <span class="number">100</span>;</span><br><span class="line">    <span class="comment">//原点y坐标</span></span><br><span class="line">    qreal b = <span class="number">100</span>;</span><br><span class="line">    <span class="comment">//半径</span></span><br><span class="line">    qreal r = <span class="number">80</span>;</span><br><span class="line">    <span class="comment">//每个小圆的半径递增值</span></span><br><span class="line">    qreal roffset = <span class="number">2</span>;</span><br><span class="line">    <span class="comment">//每个小圆的角度递增值</span></span><br><span class="line">    qreal angleOffset = <span class="number">30</span>;</span><br><span class="line"></span><br><span class="line">    qreal currentangle = mCurrent ;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">int</span> i = <span class="number">0</span>; i &lt; mColorList.length(); i++) &#123;</span><br><span class="line">        qreal r0 = i * roffset;</span><br><span class="line">        qreal angle = currentangle + i * angleOffset;</span><br><span class="line"></span><br><span class="line">        qreal x0 = r * <span class="built_in">cos</span>(qDegreesToRadians(angle)) + a;</span><br><span class="line">        qreal y0 = r * <span class="built_in">sin</span>(qDegreesToRadians(angle)) + b;</span><br><span class="line">        painter.setPen(mColorList[i]);</span><br><span class="line">        painter.setBrush(QBrush(mColorList[i]));</span><br><span class="line">        painter.drawEllipse(x0  - r0, y0 - r0, <span class="number">2</span> * r0, <span class="number">2</span> * r0);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="QQuickPaintedItem-QPainter-示例"><a href="#QQuickPaintedItem-QPainter-示例" class="headerlink" title="QQuickPaintedItem+QPainter 示例"></a>QQuickPaintedItem+QPainter 示例</h3><p>QQuickPaintedItem继承自QQuickItem，而QQuickItem就是Qml中的Item。</p>
<p>QQuickPaintedItem通过重载paint函数,就可以使用QPainter绘制。</p>
<p>自定义的QQuickPaintedItem子类需要注册到Qml中才能使用，注册类型或者注册实例都可以，具体可以参考《 Qml组件化编程5-Qml与C++交互》</p>
<p>这里示例QQuickPaintedItem 中使用 QPainter绘制一个阴阳八卦:</p>
<p><img src="/images/Qml7/2.gif" alt="预览"></p>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//PBar.h</span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">pragma</span> once</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">&lt;QQuickPaintedItem&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">PBar</span> :</span> <span class="keyword">public</span> QQuickPaintedItem</span><br><span class="line">&#123;</span><br><span class="line">    Q_OBJECT</span><br><span class="line"><span class="keyword">public</span>:</span><br><span class="line">    PBar(QQuickItem *parent = <span class="literal">nullptr</span>);</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">void</span> <span class="title">paint</span><span class="params">(QPainter *painter)</span> <span class="keyword">override</span></span>;</span><br><span class="line">    <span class="function"><span class="keyword">void</span> <span class="title">timerEvent</span><span class="params">(QTimerEvent *event)</span> <span class="keyword">override</span></span>;</span><br><span class="line"><span class="keyword">private</span>:</span><br><span class="line">    QList&lt;QColor&gt; mColorList;</span><br><span class="line">    <span class="keyword">int</span> mCurrent = <span class="number">0</span>;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//PBar.cpp</span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">"PBar.h"</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">&lt;QPainter&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">&lt;QtMath&gt;</span></span></span><br><span class="line">PBar::PBar(QQuickItem *parent) : QQuickPaintedItem (parent)</span><br><span class="line">&#123;</span><br><span class="line">    mColorList &lt;&lt; QColor(<span class="number">51</span>, <span class="number">52</span>, <span class="number">54</span>)</span><br><span class="line">               &lt;&lt; QColor(<span class="number">75</span>, <span class="number">85</span>, <span class="number">86</span>)</span><br><span class="line">               &lt;&lt; QColor(<span class="number">87</span>, <span class="number">103</span>, <span class="number">103</span>)</span><br><span class="line">               &lt;&lt; QColor(<span class="number">95</span>, <span class="number">119</span>, <span class="number">121</span>)</span><br><span class="line">               &lt;&lt; QColor(<span class="number">101</span>, <span class="number">132</span>, <span class="number">134</span>)</span><br><span class="line">               &lt;&lt; QColor(<span class="number">104</span>, <span class="number">146</span>, <span class="number">145</span>)</span><br><span class="line">               &lt;&lt; QColor(<span class="number">104</span>, <span class="number">158</span>, <span class="number">158</span>)</span><br><span class="line">               &lt;&lt; QColor(<span class="number">101</span>, <span class="number">169</span>, <span class="number">168</span>)</span><br><span class="line">               &lt;&lt; QColor(<span class="number">92</span>, <span class="number">182</span>, <span class="number">180</span>)</span><br><span class="line">               &lt;&lt; QColor(<span class="number">79</span>, <span class="number">194</span>, <span class="number">191</span>);</span><br><span class="line"></span><br><span class="line">    <span class="comment">//每秒触发60次定时器，即刷新率60FPS</span></span><br><span class="line">    startTimer(<span class="number">1000</span> / <span class="number">60</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">PBar::paint</span><span class="params">(QPainter *painter)</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">    <span class="comment">//原点x坐标</span></span><br><span class="line">    qreal a = <span class="number">100</span>;</span><br><span class="line">    <span class="comment">//原点y坐标</span></span><br><span class="line">    qreal b = <span class="number">100</span>;</span><br><span class="line">    <span class="comment">//半径</span></span><br><span class="line">    qreal r = <span class="number">80</span>;</span><br><span class="line"></span><br><span class="line">    qreal r1 = r / <span class="number">2</span>;</span><br><span class="line">    qreal r2 = r / <span class="number">6</span>;</span><br><span class="line">    qreal currentangle = mCurrent;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    painter-&gt;save();</span><br><span class="line">    painter-&gt;setRenderHints(QPainter::Antialiasing|QPainter::TextAntialiasing);</span><br><span class="line">    <span class="comment">//red 部分</span></span><br><span class="line">    &#123;</span><br><span class="line">        painter-&gt;setBrush(QBrush(QColor(<span class="number">128</span>, <span class="number">1</span>, <span class="number">1</span>)));</span><br><span class="line"></span><br><span class="line">        <span class="function">QPainterPath <span class="title">path</span><span class="params">(QPointF(a + r * <span class="built_in">cos</span>(qDegreesToRadians( currentangle )), b - r * <span class="built_in">sin</span>(qDegreesToRadians(currentangle ))))</span></span>;</span><br><span class="line">        path.arcTo(a - r, b - r,</span><br><span class="line">                   r * <span class="number">2</span>, r * <span class="number">2</span>,</span><br><span class="line">                   currentangle, <span class="number">180</span>);</span><br><span class="line">        path.arcTo(a + r1 * <span class="built_in">cos</span>(qDegreesToRadians(currentangle + <span class="number">180</span>)) - r1, b - r1 * <span class="built_in">sin</span>(qDegreesToRadians(currentangle + <span class="number">180</span>)) - r1,</span><br><span class="line">                   r1 * <span class="number">2</span>, r1 * <span class="number">2</span>,</span><br><span class="line">                   currentangle + <span class="number">180</span>, <span class="number">180</span>);</span><br><span class="line">        path.arcTo(a + r1*<span class="built_in">cos</span>(qDegreesToRadians(currentangle)) - r1, b - r1 * <span class="built_in">sin</span>(qDegreesToRadians(currentangle)) - r1,</span><br><span class="line">                   r1 * <span class="number">2</span>, r1 * <span class="number">2</span>,</span><br><span class="line">                   currentangle + <span class="number">180</span>, <span class="number">-180</span></span><br><span class="line">                   );</span><br><span class="line"></span><br><span class="line">        painter-&gt;drawPath(path);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//blue 部分</span></span><br><span class="line">    &#123;</span><br><span class="line">        painter-&gt;setBrush(QBrush(QColor(<span class="number">1</span>, <span class="number">1</span>, <span class="number">128</span>)));</span><br><span class="line">        <span class="function">QPainterPath <span class="title">path</span><span class="params">(QPointF(a + r * <span class="built_in">cos</span>(qDegreesToRadians( currentangle )), b - r * <span class="built_in">sin</span>(qDegreesToRadians(currentangle ))))</span></span>;</span><br><span class="line">        path.arcTo(a - r, b - r,</span><br><span class="line">                   r * <span class="number">2</span>, r * <span class="number">2</span>,</span><br><span class="line">                   currentangle, <span class="number">-180</span>);</span><br><span class="line">        path.arcTo(a + r1 * <span class="built_in">cos</span>(qDegreesToRadians(currentangle + <span class="number">180</span>)) - r1, b - r1 * <span class="built_in">sin</span>(qDegreesToRadians(currentangle + <span class="number">180</span>)) - r1,</span><br><span class="line">                   r1 * <span class="number">2</span>, r1 * <span class="number">2</span>,</span><br><span class="line">                   currentangle + <span class="number">180</span>, <span class="number">180</span>);</span><br><span class="line">        path.arcTo(a + r1*<span class="built_in">cos</span>(qDegreesToRadians(currentangle)) - r1, b - r1 * <span class="built_in">sin</span>(qDegreesToRadians(currentangle)) - r1,</span><br><span class="line">                   r1 * <span class="number">2</span>, r1 * <span class="number">2</span>,</span><br><span class="line">                   currentangle + <span class="number">180</span>, <span class="number">-180</span></span><br><span class="line">                   );</span><br><span class="line"></span><br><span class="line">        painter-&gt;drawPath(path);</span><br><span class="line">    &#125;</span><br><span class="line">    &#123;</span><br><span class="line">        <span class="comment">// red 小圆</span></span><br><span class="line">        painter-&gt;setBrush(QBrush(QColor(<span class="number">128</span>, <span class="number">1</span>, <span class="number">1</span>)));</span><br><span class="line">        QPainterPath path;</span><br><span class="line">        path.addEllipse(a + r1 * <span class="built_in">cos</span>(qDegreesToRadians(currentangle)) - r2, b - r1 * <span class="built_in">sin</span>(qDegreesToRadians(currentangle )) - r2,</span><br><span class="line">                        r2 * <span class="number">2</span>, r2 * <span class="number">2</span>);</span><br><span class="line">        painter-&gt;drawPath(path);</span><br><span class="line">    &#125;</span><br><span class="line">    &#123;</span><br><span class="line">        <span class="comment">//blue 小圆</span></span><br><span class="line">        painter-&gt;setBrush(QBrush(QColor(<span class="number">1</span>, <span class="number">1</span>, <span class="number">128</span>)));</span><br><span class="line">        QPainterPath path;</span><br><span class="line">        path.addEllipse(a + r1 * <span class="built_in">cos</span>(qDegreesToRadians(<span class="number">180</span> + currentangle)) - r2, b - r1 * <span class="built_in">sin</span>(qDegreesToRadians(<span class="number">180</span> + currentangle)) - r2,</span><br><span class="line">                        r2 * <span class="number">2</span>, r2 * <span class="number">2</span>);</span><br><span class="line">        painter-&gt;drawPath(path);</span><br><span class="line">    &#125;</span><br><span class="line">    painter-&gt;restore();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">PBar::timerEvent</span><span class="params">(QTimerEvent *event)</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">    (<span class="keyword">void</span>)event;</span><br><span class="line">    mCurrent =(mCurrent + <span class="number">3</span>) % <span class="number">360</span>;</span><br><span class="line">    update();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//main.cpp</span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">&lt;QGuiApplication&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">&lt;QQmlApplicationEngine&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">"PBar.h"</span></span></span><br><span class="line"><span class="function"><span class="keyword">int</span> <span class="title">main</span><span class="params">(<span class="keyword">int</span> argc, <span class="keyword">char</span> *argv[])</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);</span><br><span class="line"></span><br><span class="line">    <span class="function">QGuiApplication <span class="title">app</span><span class="params">(argc, argv)</span></span>;</span><br><span class="line">    qmlRegisterType&lt;PBar&gt;(<span class="string">"PBar"</span>, <span class="number">1</span>, <span class="number">0</span>, <span class="string">"PBar"</span>);</span><br><span class="line">    QQmlApplicationEngine engine;</span><br><span class="line">    <span class="function"><span class="keyword">const</span> QUrl <span class="title">url</span><span class="params">(QStringLiteral(<span class="string">"qrc:/main.qml"</span>))</span></span>;</span><br><span class="line">    QObject::<span class="built_in">connect</span>(&amp;engine, &amp;QQmlApplicationEngine::objectCreated,</span><br><span class="line">                     &amp;app, [url](QObject *obj, <span class="keyword">const</span> QUrl &amp;objUrl) &#123;</span><br><span class="line">                         <span class="keyword">if</span> (!obj &amp;&amp; url == objUrl)</span><br><span class="line">                             QCoreApplication::<span class="built_in">exit</span>(<span class="number">-1</span>);</span><br><span class="line">                     &#125;, Qt::QueuedConnection);</span><br><span class="line">    engine.load(url);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> app.exec();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight qml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//main.qml</span></span><br><span class="line"><span class="keyword">import</span> QtQuick <span class="number">2.0</span></span><br><span class="line"><span class="keyword">import</span> QtQuick.Window <span class="number">2.0</span></span><br><span class="line"><span class="keyword">import</span> PBar <span class="number">1.0</span></span><br><span class="line"><span class="title">Window</span> &#123;</span><br><span class="line">    <span class="attribute">visible</span>: <span class="literal">true</span></span><br><span class="line">    <span class="attribute">width</span>: <span class="number">640</span></span><br><span class="line">    <span class="attribute">height</span>: <span class="number">480</span></span><br><span class="line">    <span class="attribute">title</span>: qsTr(<span class="string">"Hello PBar"</span>)</span><br><span class="line"></span><br><span class="line">    <span class="title">PBar</span> &#123;</span><br><span class="line">        <span class="attribute">anchors.fill</span>: <span class="built_in">parent</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="关于QPainter"><a href="#关于QPainter" class="headerlink" title="关于QPainter"></a>关于QPainter</h3><p>QPainter底层使用CPU做光栅化渲染，这种方式在没有GPU的设备中能够很好地工作。</p>
<p>(我的好友”Qt侠-刘典武”就是这方面的实战专家，他手上有将近150个精美的自绘组件，比官方还要多，有需要的同学可以联系他 QQ517216493)</p>
<p>然而时代在飞速发展，很多设备都带上了GPU，QPainter在GPU设备上，将不能发挥GPU的全部实力。</p>
<p>(刘典武也在积极跟进GPU绘制)</p>
<p>这里提一下，有个叫QUItCoding的组织，开发了一套<a href="https://github.com/QUItCoding/qnanopainter" target="_blank" rel="noopener">QNanoPainter</a>，接口和QPainter一致，</p>
<p>在大部分场景下都拥有不错的性能。其底层是基于<a href="https://github.com/memononen/nanovg" target="_blank" rel="noopener">nanovg</a>的GPU加速。</p>
<p>不过QNanoPainter并没有合并进Qt官方，具体原因不清楚, 有可能是因为性能并不是100%达标的。</p>
<h2 id="Qml-Canvas"><a href="#Qml-Canvas" class="headerlink" title="Qml Canvas"></a>Qml Canvas</h2><p>Qml中提供了Canvas组件，接口和html中的Canvas基本一致，可以直接copy html中的Canvas代码(极少部分不能用)。</p>
<p>当然QPainter实现的功能，也都可以移植到Canvas中。</p>
<p>Canvas渲染性能并不太好，如果有性能要求，还是不要用Canvas了。</p>
<p>这里示例绘制一个笑脸</p>
<p><img src="/images/Qml7/3.png" alt="预览"></p>
<figure class="highlight qml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//main.qml</span></span><br><span class="line"><span class="keyword">import</span> QtQuick <span class="number">2.0</span></span><br><span class="line"><span class="keyword">import</span> QtQuick.Window <span class="number">2.0</span></span><br><span class="line"></span><br><span class="line"><span class="title">Window</span> &#123;</span><br><span class="line">    <span class="attribute">visible</span>: <span class="literal">true</span></span><br><span class="line">    <span class="attribute">width</span>: <span class="number">640</span></span><br><span class="line">    <span class="attribute">height</span>: <span class="number">480</span></span><br><span class="line">    <span class="attribute">title</span>: qsTr(<span class="string">"Hello Canvas"</span>)</span><br><span class="line"></span><br><span class="line">    <span class="title">Canvas</span> &#123;</span><br><span class="line">        <span class="attribute">id:</span><span class="string"> canvas</span></span><br><span class="line">        <span class="attribute">anchors.fill</span>: <span class="built_in">parent</span></span><br><span class="line">        <span class="attribute">onPaint</span>: &#123;</span><br><span class="line"></span><br><span class="line">            <span class="keyword">var</span> ctx = canvas.getContext(<span class="string">'2d'</span>);</span><br><span class="line"></span><br><span class="line">            ctx.beginPath();</span><br><span class="line">            ctx.arc(<span class="number">75</span>,<span class="number">75</span>,<span class="number">50</span>,<span class="number">0</span>,<span class="built_in">Math</span>.PI*<span class="number">2</span>,<span class="literal">true</span>); <span class="comment">// 绘制</span></span><br><span class="line">            ctx.moveTo(<span class="number">110</span>,<span class="number">75</span>);</span><br><span class="line">            ctx.arc(<span class="number">75</span>,<span class="number">75</span>,<span class="number">35</span>,<span class="number">0</span>,<span class="built_in">Math</span>.PI,<span class="literal">false</span>);   <span class="comment">// 口(顺时针)</span></span><br><span class="line">            ctx.moveTo(<span class="number">65</span>,<span class="number">65</span>);</span><br><span class="line">            ctx.arc(<span class="number">60</span>,<span class="number">65</span>,<span class="number">5</span>,<span class="number">0</span>,<span class="built_in">Math</span>.PI*<span class="number">2</span>,<span class="literal">true</span>);  <span class="comment">// 左眼</span></span><br><span class="line">            ctx.moveTo(<span class="number">95</span>,<span class="number">65</span>);</span><br><span class="line">            ctx.arc(<span class="number">90</span>,<span class="number">65</span>,<span class="number">5</span>,<span class="number">0</span>,<span class="built_in">Math</span>.PI*<span class="number">2</span>,<span class="literal">true</span>);  <span class="comment">// 右眼</span></span><br><span class="line">            ctx.stroke();</span><br><span class="line"></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="Qml-Shapes"><a href="#Qml-Shapes" class="headerlink" title="Qml Shapes"></a>Qml Shapes</h2><p>Qt5.10开始，Qml增加了Quick.Shapes功能。这是目前官方提供的自绘途径中，兼顾性能和易用性的最佳选择。</p>
<p>Shapes底层为GPU渲染(基于SceneGraph)，QPainter能绘制的基础图元，都可以用Shapes实现。Shapes再配合上Qml中的</p>
<p>属性绑定和属性动画，可以轻易实现各式各样的动态、酷炫的UI。</p>
<p>(后续的自定义组件，涛哥将会优先使用Shapes。)</p>
<p>这里示例实现一个任意圆角的Rectangle组件:</p>
<p><img src="/images/Qml7/4.gif" alt="预览"></p>
<figure class="highlight qml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// TRoundRect.qml</span></span><br><span class="line"><span class="keyword">import</span> QtQuick <span class="number">2.12</span></span><br><span class="line"><span class="keyword">import</span> QtQuick.Controls <span class="number">2.5</span></span><br><span class="line"><span class="keyword">import</span> QtQuick.Shapes <span class="number">1.12</span></span><br><span class="line"><span class="title">Shape</span> &#123;</span><br><span class="line">    <span class="attribute">id:</span><span class="string"> root</span></span><br><span class="line">    <span class="comment">//左上角是否圆角</span></span><br><span class="line">    <span class="keyword">property</span><span class="string"> bool leftTopRound</span>: <span class="literal">true</span></span><br><span class="line">    <span class="comment">//左下角是否圆角</span></span><br><span class="line">    <span class="keyword">property</span><span class="string"> bool leftBottomRound</span>: <span class="literal">true</span></span><br><span class="line">    <span class="comment">//右上角是否圆角</span></span><br><span class="line">    <span class="keyword">property</span><span class="string"> bool rightTopRound</span>: <span class="literal">true</span></span><br><span class="line">    <span class="comment">//右下角是否圆角</span></span><br><span class="line">    <span class="keyword">property</span><span class="string"> bool rightBottomRound</span>: <span class="literal">true</span></span><br><span class="line">    <span class="comment">//圆角半径</span></span><br><span class="line">    <span class="keyword">property</span><span class="string"> real radius</span></span><br><span class="line">    <span class="comment">//颜色</span></span><br><span class="line">    <span class="keyword">property</span><span class="string"> color color</span>: <span class="string">"red"</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">//多重采样抗锯齿</span></span><br><span class="line">    <span class="attribute">layer.enabled</span>: <span class="literal">true</span></span><br><span class="line">    <span class="attribute">layer.samples</span>: <span class="number">8</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">//平滑处理</span></span><br><span class="line">    <span class="attribute">smooth</span>: <span class="literal">true</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">//反走样抗锯齿</span></span><br><span class="line">    <span class="attribute">antialiasing</span>: <span class="literal">true</span></span><br><span class="line"></span><br><span class="line">    <span class="title">ShapePath</span> &#123;</span><br><span class="line">        <span class="attribute">fillColor</span>: <span class="built_in">color</span></span><br><span class="line">        <span class="attribute">startX</span>: leftTopRound ? <span class="attribute">radius</span> : <span class="number">0</span></span><br><span class="line">        <span class="attribute">startY</span>: <span class="number">0</span></span><br><span class="line">        <span class="attribute">fillRule</span>: ShapePath.WindingFill</span><br><span class="line">        <span class="title">PathLine</span> &#123;</span><br><span class="line">            <span class="attribute">x</span>: rightTopRound ? root.width - <span class="attribute">radius</span> : root.width</span><br><span class="line">            <span class="attribute">y</span>: <span class="number">0</span></span><br><span class="line">        &#125;</span><br><span class="line">        <span class="title">PathArc</span> &#123;</span><br><span class="line">            <span class="attribute">x</span>: root.width</span><br><span class="line">            <span class="attribute">y</span>: rightTopRound ? <span class="attribute">radius</span> : <span class="number">0</span></span><br><span class="line">            <span class="attribute">radiusX</span>: rightTopRound ? <span class="attribute">radius</span> : <span class="number">0</span></span><br><span class="line">            <span class="attribute">radiusY</span>: rightTopRound ? <span class="attribute">radius</span> : <span class="number">0</span></span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="title">PathLine</span> &#123;</span><br><span class="line">            <span class="attribute">x</span>: root.width</span><br><span class="line">            <span class="attribute">y</span>: rightBottomRound ? root.height - <span class="attribute">radius</span> : root.height</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="title">PathArc</span> &#123;</span><br><span class="line">            <span class="attribute">x</span>: rightBottomRound ? root.width - <span class="attribute">radius</span> : root.width</span><br><span class="line">            <span class="attribute">y</span>: root.height</span><br><span class="line">            <span class="attribute">radiusX</span>: rightBottomRound ? <span class="attribute">radius</span> : <span class="number">0</span></span><br><span class="line">            <span class="attribute">radiusY</span>: rightBottomRound ? <span class="attribute">radius</span> : <span class="number">0</span></span><br><span class="line">        &#125;</span><br><span class="line">        <span class="title">PathLine</span> &#123;</span><br><span class="line">            <span class="attribute">x</span>: leftBottomRound ? <span class="attribute">radius</span> : <span class="number">0</span></span><br><span class="line">            <span class="attribute">y</span>: root.height</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="title">PathArc</span> &#123;</span><br><span class="line">            <span class="attribute">x</span>: <span class="number">0</span></span><br><span class="line">            <span class="attribute">y</span>: leftBottomRound ? root.height - <span class="attribute">radius</span> : root.height</span><br><span class="line">            <span class="attribute">radiusX</span>: leftBottomRound ? <span class="attribute">radius</span> : <span class="number">0</span></span><br><span class="line">            <span class="attribute">radiusY</span>: leftBottomRound ? <span class="attribute">radius</span> : <span class="number">0</span></span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="title">PathLine</span> &#123;</span><br><span class="line">            <span class="attribute">x</span>: <span class="number">0</span></span><br><span class="line">            <span class="attribute">y</span>: leftTopRound ? <span class="attribute">radius</span> : <span class="number">0</span></span><br><span class="line">        &#125;</span><br><span class="line">        <span class="title">PathArc</span> &#123;</span><br><span class="line">            <span class="attribute">x</span>: leftTopRound ? <span class="attribute">radius</span> : <span class="number">0</span></span><br><span class="line">            <span class="attribute">y</span>: <span class="number">0</span></span><br><span class="line">            <span class="attribute">radiusX</span>: leftTopRound ? <span class="attribute">radius</span> : <span class="number">0</span></span><br><span class="line">            <span class="attribute">radiusY</span>: leftTopRound ? <span class="attribute">radius</span> : <span class="number">0</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>看一下TRoundRect的用法</p>
<figure class="highlight qml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> QtQuick <span class="number">2.0</span></span><br><span class="line"><span class="keyword">import</span> QtQuick.Controls <span class="number">2.5</span></span><br><span class="line"><span class="title">Rectangle</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">800</span></span><br><span class="line">    <span class="attribute">height</span>: <span class="number">600</span></span><br><span class="line"></span><br><span class="line">    <span class="title">Rectangle</span> &#123; <span class="comment">//背景红色，衬托一下</span></span><br><span class="line">        <span class="attribute">x</span>: <span class="number">10</span></span><br><span class="line">        <span class="attribute">width</span>: <span class="number">100</span></span><br><span class="line">        <span class="attribute">height</span>: <span class="number">160</span></span><br><span class="line">        <span class="attribute">color</span>: <span class="string">"red"</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title">TRoundRect</span> &#123;</span><br><span class="line">        <span class="attribute">id:</span><span class="string"> roundRect</span></span><br><span class="line">        <span class="attribute">x</span>: <span class="number">40</span></span><br><span class="line">        <span class="attribute">y</span>: <span class="number">10</span></span><br><span class="line">        <span class="attribute">width</span>: <span class="number">200</span></span><br><span class="line">        <span class="attribute">height</span>: <span class="number">160</span></span><br><span class="line">        <span class="attribute">radius</span>: <span class="number">40</span></span><br><span class="line">        <span class="attribute">leftTopRound</span>: lt.checked</span><br><span class="line">        <span class="attribute">rightTopRound</span>: rt.checked</span><br><span class="line">        <span class="attribute">leftBottomRound</span>: lb.checked</span><br><span class="line">        <span class="attribute">rightBottomRound</span>: rb.checked</span><br><span class="line">        <span class="attribute">color</span>: <span class="string">"#A0333666"</span>      <span class="comment">//半透明色</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="title">Grid</span> &#123;</span><br><span class="line">        <span class="attribute">x</span>: <span class="number">300</span></span><br><span class="line">        <span class="attribute">y</span>: <span class="number">10</span></span><br><span class="line">        <span class="attribute">columns</span>: <span class="number">2</span></span><br><span class="line">        <span class="attribute">spacing</span>: <span class="number">10</span></span><br><span class="line"></span><br><span class="line">        <span class="title">CheckBox</span> &#123;</span><br><span class="line">            <span class="attribute">id:</span><span class="string"> lt</span></span><br><span class="line">            <span class="attribute">text</span>: <span class="string">"LeftTop"</span></span><br><span class="line">            <span class="attribute">checked</span>: <span class="literal">true</span></span><br><span class="line">        &#125;</span><br><span class="line">        <span class="title">CheckBox</span> &#123;</span><br><span class="line">            <span class="attribute">id:</span><span class="string"> rt</span></span><br><span class="line">            <span class="attribute">text</span>: <span class="string">"RightTop"</span></span><br><span class="line">            <span class="attribute">checked</span>: <span class="literal">true</span></span><br><span class="line">        &#125;</span><br><span class="line">        <span class="title">CheckBox</span> &#123;</span><br><span class="line">            <span class="attribute">id:</span><span class="string"> lb</span></span><br><span class="line">            <span class="attribute">text</span>: <span class="string">"LeftBottom"</span></span><br><span class="line">            <span class="attribute">checked</span>: <span class="literal">true</span></span><br><span class="line">        &#125;</span><br><span class="line">        <span class="title">CheckBox</span> &#123;</span><br><span class="line">            <span class="attribute">id:</span><span class="string"> rb</span></span><br><span class="line">            <span class="attribute">text</span>: <span class="string">"rightBottom"</span></span><br><span class="line">            <span class="attribute">checked</span>: <span class="literal">true</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="QOpenGLWidget-QOpenGLWindow"><a href="#QOpenGLWidget-QOpenGLWindow" class="headerlink" title="QOpenGLWidget / QOpenGLWindow"></a>QOpenGLWidget / QOpenGLWindow</h2><p>有的同学学习过OpenGL这类图形渲染API，Qt为OpenGL提供了便利的窗口和上下文环境。</p>
<p>QOpenGLWidget用来在QWidget框架中集成OpenGL渲染，QOpenGLWindow用在Qml框架。</p>
<p>使用方法都是子类重载下面三个函数：</p>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">initializeGL</span><span class="params">()</span></span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">paintGL</span><span class="params">()</span></span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">resizeGL</span><span class="params">(<span class="keyword">int</span> w, <span class="keyword">int</span> h)</span></span>;</span><br></pre></td></tr></table></figure>

<p>这里可以参考官方的示例：</p>
<p><a href="[https://doc.qt.io/qt-5/qtopengl-hellogl2-example.html">QOpenGLWidget示例</a></p>
<p><a href="https://doc.qt.io/qt-5/qtgui-openglwindow-example.html" target="_blank" rel="noopener">QOpenGLWindow示例</a></p>
<p>Qt对OpenGL系列的函数都做了封装，一般使用QOpenGLFunctions就够了，QOpenGLFunctions是基于OpenGL ES 2.0 API的跨平台实现，删减了个别API。</p>
<p>相应的有一个未删减的OpenGLES2 的封装：QOpenGLFunctions_ES2。</p>
<p>当然为了兼容所有OpenGL版本，Qt分别封装了相应的类</p>
<p><img src="/images/Qml7/5.png" alt="预览"></p>
<p>有特殊版本需要的时候，可以把QOpenGLFunctions换成相应的类。</p>
<p>还有一个OpenGL ES3.0的封装， QOpenGLExtraFunctions，可以在支持OpenGL ES 3.0的设备上使用。</p>
<p>使用这些functions，一定要在有OpenGL上下文环境的地方，先调用一下initializeOpenGLFunctions。有些版本的init有返回值的，要注意判断并处理。</p>
<h2 id="Qml-SceneGraph"><a href="#Qml-SceneGraph" class="headerlink" title="Qml SceneGraph"></a>Qml SceneGraph</h2><p>Qml基于GPU实现了一套渲染框架，这个框架就是SceneGraph。</p>
<p>SceneGraph提供了很多GPU渲染相关的功能，以方便进行自绘制，都是以QSG开头的类，如下图所示：</p>
<p><img src="/images/Qml7/6.png" alt="预览"></p>
<p>使用方式是在QQuickItem的子类中，重载updatePaintNode函数：</p>
<figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="function">QSGNode *<span class="title">TaoItem::updatePaintNode</span><span class="params">(QSGNode *node, UpdatePaintNodeData *)</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">    QSGSimpleRectNode *n = <span class="keyword">static_cast</span>&lt;QSGSimpleRectNode *&gt;(node);</span><br><span class="line">    <span class="keyword">if</span> (!n) &#123;</span><br><span class="line">        n = <span class="keyword">new</span> QSGSimpleRectNode();</span><br><span class="line">        n-&gt;setColor(Qt::red);</span><br><span class="line">    &#125;</span><br><span class="line">    n-&gt;setRect(boundingRect());</span><br><span class="line">    <span class="keyword">return</span> n;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>在使用Qml框架的程序中，使用这些QSG功能，将自定义渲染直接加入SceneGraph框架的渲染流程，无疑是性能最优的。</p>
<p>不过问题在于，这些QSG有点难以使用。需要有一定的OpenGL或DirectX相关图形学知识，并理解SceneGraph的节点交换机制，才能用好。</p>
<p>而懂OpenGL的人，有更好的选择，就是直接使用OpenGL的API。下面的QQuickFrameBufferObject就是一种途径。</p>
<h2 id="Qml-QQuickFrameBufferObject"><a href="#Qml-QQuickFrameBufferObject" class="headerlink" title="Qml QQuickFrameBufferObject"></a>Qml QQuickFrameBufferObject</h2><p>QQuickFramebufferObject继承于QQuickItem(Qml中将它当作一个Item就可以了)，用来在一个framebuffer object(FBO)上做渲染，</p>
<p>SceneGraph框架会将这个FBO渲染到屏幕上。</p>
<p>使用的方式是，实现一个QQuickFramebufferObject::Renderer类。</p>
<p>这个类里面始终是拥有OpenGL上下文环境的，内存也是被SceneGraph框架管理的，只要理解了渲染流程，用起来还是很方便的。</p>
<p>涛哥在Qml中集成 视频播放器 和 3D模型渲染的时候，就使用了这个FBO。</p>
<p>可以参考这两个例子：</p>
<p><a href="https://github.com/jaredtao/QmlAssimp" target="_blank" rel="noopener">Qml渲染3D模型</a></p>
<p><a href="https://github.com/jaredtao/QmlOpenGLResize" target="_blank" rel="noopener">FFmpeg解码，Qml/OpenGL转码渲染</a></p>
<h2 id="Qml-ShaderEffect"><a href="#Qml-ShaderEffect" class="headerlink" title="Qml ShaderEffect"></a>Qml ShaderEffect</h2><p>学习过图形学的人，都应该听说过大名鼎鼎的<a href="https://www.shadertoy.com/" target="_blank" rel="noopener">Shadertoy</a></p>
<p>只要一点奇妙的Shader代码，就能渲染出各种酷炫的效果。</p>
<p>Qml中提供了ShaderEffect组件，就可以用来做ShaderToy那样的特效。</p>
<p>可以参考qyvlik的代码仓库：</p>
<p><a href="https://github.com/qyvlik/ShaderToy.qml" target="_blank" rel="noopener">qyvlik-ShaderToy.qml</a></p>
<p>以及我很久以前写的例子：</p>
<p><a href="https://github.com/jaredtao/ShaderToy" target="_blank" rel="noopener">Tao-ShaderToy</a></p>
<p><a href="https://github.com/jaredtao/PowerBall" target="_blank" rel="noopener">360能量球</a></p>
<p>Qml中还有个神奇的ShaderEffectSource，可以用在普通Item的layer.effect中，</p>
<p>比如这个例子，就用ShaderEffectSource做了倒影特效:</p>
<p><a href="https://github.com/jaredtao/Qmldemoset" target="_blank" rel="noopener">倒影特效</a></p>
<h2 id="QVulkanWindow"><a href="#QVulkanWindow" class="headerlink" title="QVulkanWindow"></a>QVulkanWindow</h2><p>OpenGL的下一代，已经进化为vulkan了。</p>
<p>Qt 5.10开始，也提供了vulkan的支持。</p>
<p>涛哥水平有限，这次只提一下，就先不展开说了。</p>

    </div>
    
    <div class="reward" ontouchstart>
    <div class="reward-wrap">赏
        <div class="reward-box">
            
            <span class="reward-type">
                <img class="alipay" src="/img/zhifubao.jpg"><b>支付宝打赏</b>
            </span>
            
            
            <span class="reward-type">
                <img class="wechat" src="/img/weixin.jpg"><b>微信打赏</b>
            </span>
            
        </div>
    </div>
    <p class="reward-tip">
        很有收获,请作者喝杯茶
    </p>
</div>
    
    <div class="post-footer">
        <div>
            
            转载声明：
            文章采用<a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a>进行许可, 转载请注明出处 © <a href="https://jaredtao.github.io" target="_blank">武威的涛哥</a>
            
            
        </div>
        <div>
            
        </div>
    </div>
</article>
<div class="article-nav prev-next-wrap clearfix">
    
    <a href="/2019/05/22/Qml/%E7%8E%A9%E8%BD%ACQml(8)-Qml%E5%B1%9E%E6%80%A7/" class="pre-post btn btn-default" title='玩转Qml(8)-Qml属性'>
        <i class="fa fa-angle-left fa-fw"></i><span class="hidden-lg">上一篇</span>
        <span class="hidden-xs">
            玩转Qml(8)-Qml属性</span>
    </a>
    
    
    <a href="/2019/05/18/Qt/%E7%8E%A9%E8%BD%ACQt(3)-%E7%94%A8%E5%A5%BDQtCreator/" class="next-post btn btn-default" title='玩转Qt(3)-用好QtCreator'>
        <span class="hidden-lg">下一篇</span>
        <span class="hidden-xs">
            玩转Qt(3)-用好QtCreator</span><i class="fa fa-angle-right fa-fw"></i>
    </a>
    
</div>

<div id="comments">
    

<div id="vcomments" class="valine"></div>

<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="/assets/valine.min.js"></script>

<script>
new Valine({
    av: AV,
    el: '#vcomments',
    appId: 'qegD4552u6FU9HoNDvRsonko-gzGzoHsz',
    appKey: 'eitB2FV5n2qyMHcDM7x6EQpt',
    placeholder: '说点什么吧',
    notify: false,
    verify: true,
    avatar: 'mm',
    meta: 'nick,mail'.split(','),
    pageSize: '10',
    path: window.location.pathname,
    lang: 'zh-CN'.toLowerCase()
})
</script>


</div>


                </main>
                
                    <aside id="article-toc" role="navigation" class="col-md-4">
    <div class="widget">
        <h3 class="title">
            文章目录
        </h3>
        
        <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#简介"><span class="toc-text">简介</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#源码"><span class="toc-text">源码</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#自绘方案"><span class="toc-text">自绘方案</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#QPainter"><span class="toc-text">QPainter</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#QWidget-QPainter-示例"><span class="toc-text">QWidget+QPainter 示例</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#QQuickPaintedItem-QPainter-示例"><span class="toc-text">QQuickPaintedItem+QPainter 示例</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#关于QPainter"><span class="toc-text">关于QPainter</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Qml-Canvas"><span class="toc-text">Qml Canvas</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Qml-Shapes"><span class="toc-text">Qml Shapes</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#QOpenGLWidget-QOpenGLWindow"><span class="toc-text">QOpenGLWidget &#x2F; QOpenGLWindow</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Qml-SceneGraph"><span class="toc-text">Qml SceneGraph</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Qml-QQuickFrameBufferObject"><span class="toc-text">Qml QQuickFrameBufferObject</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Qml-ShaderEffect"><span class="toc-text">Qml ShaderEffect</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#QVulkanWindow"><span class="toc-text">QVulkanWindow</span></a></li></ol>
        
    </div>
</aside>
                
            </div>
        </div>
    </section>
    <footer class="main-footer">
    <div class="container">
        <div class="row">
        </div>
    </div>
</footer>
<a id="back-to-top" class="icon-btn hide">
    <i class="fa fa-chevron-up"></i>
</a>
    <div class="copyright">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="busuanzi">
    
    访问量:
    <strong id="busuanzi_value_site_pv">
        <i class="fa fa-spinner fa-spin"></i>
    </strong>
    &nbsp; | &nbsp;
    访客数:
    <strong id="busuanzi_value_site_uv">
        <i class="fa fa-spinner fa-spin"></i>
    </strong>
    
</div>
            </div>
            <div class="col-sm-12">
                <span>Copyright &copy;
                    2019
                    
                </span> |
                <span>
                    Powered by <a href="//hexo.io" class="copyright-links" target="_blank" rel="nofollow">Hexo</a>
                </span> |
                <span>
                    Theme by <a href="//github.com/shenliyang/hexo-theme-snippet.git" class="copyright-links" target="_blank" rel="nofollow">Snippet</a>
                </span>
            </div>
        </div>
    </div>
</div>



<script src="/assets/tagcanvas.min.js?rev=2.9.js"></script>

<script>
var tagOption = {
    textColour: '#444', // 字体颜色
    outlineMethod: 'block', // 选中模式
    outlineColour: '#FFDAB9', // 选中模式的颜色
    interval: 30 || 30, // 动画帧之间的时间间隔，值越大，转动幅度越大
    textHeight: 13,
    outlineRadius: 3,
    freezeActive: true || '', // 选中的标签是否继续滚动
    frontSelect: true || '', // 不选标签云后部的标签
    initial: [0.1, -0.1],
    depth: 0.5,
    decel: 0.95,
    maxSpeed: 0.03,
    reverse: true || '', // 是否反向触发
    fadeIn: 500, // 进入动画时间
    wheelZoom: false || '' // 是否启用鼠标滚轮
}
TagCanvas.Start('tag-cloud-3d', '', tagOption);
</script>


<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>


<script src="/js/app.js?rev=@@hash.js"></script>

</body>
</html>